<template>
    <div>
        <div class="collections-tools">
            面板集合列表
            <div class="collection-add"  @click="showCollectionForm = true">
                <d2-icon-svg name="add" class="collection-addIcon"/>
            </div>
            <div class="collection-form" v-if="showCollectionForm">
                <div class="collection-trangle"></div>
                <div class="collection-form_header">
                    创建集合
                </div>
                <div class="collection-form_body">
                    <div class="collection-form_row">
                        <label>集合名称</label><input type="text" v-model="collection.collectionName"/>
                    </div>
                    <div class="collection-form_row">
                        <label title="当前集合构建数目">当前集合构建数目</label><span>{{collection ? collection.componentIds.length:0}}</span>
                    </div>
                    <div class="collection-form_row" style="margin-bottom: 8px;">
                        <label>集合描述</label><input type="text" v-model="collection.collectionDes"/>
                    </div>
                </div>
                <div class="collection-form_footer">
                    <a class="collection-btn collection-cancel_btn" @click="closeCollectionForm">关闭</a>
                    <a class="collection-btn collection-comfirm_btn" @click="addCollection(collection)">确认</a>
                </div>
            </div>
        </div>
        <div class="cle-body">
            <div class="collection-item" v-for="(collection,index) in collections">
                <div class="collection-item_delete" @click="deleteCollection(index)">
                    <d2-icon-svg class="tool-icon" name='collection-delete_2'/>
                </div>
               <!-- <div class="tex">dfds</div>-->
                <div class="collection-item_row">
                    <label>分组名称</label> <span>{{collection.collectionName}}</span>
                </div>
                <div class="collection-item_row">
                    <label>组件数目</label> <span>{{collection.componentIds.length}}</span>
                </div>
                <div class="collection-item_row">
                    <label>分组描述</label> <span>{{collection.collectionDes}}</span>
                </div>
                <div class="collection-item_row">
                    <label>是否高亮显示当前组</label>
                    <select @change="highlightedOrDeHighlightedComponents(collection,collection.highlighted)" v-model="collection.highlighted">
                        <option value=false>否</option>
                        <option value=true>是</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "component-collections",
        props:["currentTool"],
        data:function () {
            return {
                collections:[],
                showCollectionForm:false,
                collection:{collectionName:"",collectionDes:"",highlighted:false,componentIds:[]}
            }
        },
        watch:{
            currentTool:{
                handler(newValue, oldValue) {
                    console.log("ddd")
                    console.log(newValue);
                    console.log(oldValue);
                },
                deep: true
            }
        },
        methods:{
            /**
             * 添加结合
             */
            addCollection(collection) {
                if(!this.collection.componentIds.length){
                    alert("请选择组件集合后，进行该操作");
                    return;
                }
                this.collections.push(collection)
                for(var i=0; i < this.collection.componentIds.length; i ++){
                    GOLOAlBAL_OPEOBJ.bimModel.objects[collection.componentIds[i]].highlighted = false;
                }
                this.collection = {collectionName:"",collectionDes:"",highlighted:false,componentIds:[]};
                this.showCollectionForm = false;
            },
            /**
             * 删除选中的集合
             */
            deleteCollection(index){
                this.collections.splice(index,1);
            },
            /**
             * 初始化pick监听函数与事件处理器
             */
            initPickListener(){
                var self = this;
                GOLOAlBAL_OPEOBJ.cameraControl.on("picked",function (hit) {
                    if(!(self.currentTool=="collection")){
                        return ;
                    }
                    /*ctrl多选，key事件处理通过封装的KeyEvent类获得*/
                    if(GOLOAlBAL_OPEOBJ.keyEvent.KeyDownMap.KEY_CTRL){
                        if(!GOLOAlBAL_OPEOBJ.bimModel.objects[hit.object.id].highlighted){
                            if(!self.collection){
                                self.collection = {collectionName:"",collectionDes:"",highlighted:false,componentIds:[]};
                            }
                            self.collection.componentIds.push(hit.object.id);
                            GOLOAlBAL_OPEOBJ.bimModel.objects[hit.object.id].highlighted = true;
                        } else{
                            GOLOAlBAL_OPEOBJ.bimModel.objects[hit.object.id].highlighted = false;
                            if(self.collection){
                                for(var i = 0; i < self.collection.componentIds.length; i ++){
                                    var curId = self.collection.componentIds[i];
                                    if(curId == hit.object.id){
                                        self.collection.componentIds.splice(i,1);
                                        break;
                                    }
                                }
                            }
                        }
                    }
                });
            },
            /**
             * 关闭集合填写的弹出框
             */
            closeCollectionForm() {
                this.showCollectionForm=false;
                this.collection = {collectionName:"",collectionDes:"",highlighted:false,componentIds:[]};
            },
            /**
             * 高亮或者非高亮显示组件
             * @param componentIds 组件id
             * @param highlighted 是否高亮
             */
            highlightedOrDeHighlightedComponents(collection,highlighted){
                if(JSON.parse(highlighted) == true){
                    for(var i = 0; i < collection.componentIds.length; i ++){
                        GOLOAlBAL_OPEOBJ.bimModel.objects[collection.componentIds[i]].highlighted = true;
                    }
                }
                else{
                    for(var i = 0; i < collection.componentIds.length; i ++){
                        GOLOAlBAL_OPEOBJ.bimModel.objects[collection.componentIds[i]].highlighted = false;
                    }
                }
            }
        },
        mounted(){
            this.initPickListener();
        },
        created(){

        }
    }
</script>

<style scoped>
.cle-body{
    width: 100%;
    height: 588px;;
    background: rgba(3, 29, 35, 0.86);
    overflow-y: auto;
}
.collection-item{
    position: relative;
    padding: 10px 10px 20px 10px;
    background: #f1ecec;
    border-bottom: 1px solid #929692;
}

.collection-item_row{
    height: 37px;
    line-height: 37px;
}

.collection-item_row label{
    display: inline-block;
    width: 30%;
    margin-right: 5%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.collection-item_row select{
    display: inline-block;
    border:1px solid #eadbdb;
    border-radius: 4px;
    height: 25px;
    line-height: 25px;
    width: 65%;
}
.collection-item_row span{
    display: inline-block;
    height: 25px;
    line-height: 25px;
    width: 65%;
}

.collection-item_delete{
    position: absolute;
    height: 23px;
    width: 23px;
    left: 283px;
    top: 156px;
    z-index: 200;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}

.collection-item_delete:hover{
    transform: rotate(45deg);
}
.collection-form{
    position: absolute;
    left: 330px;
    top: 0px;
    width: 316px;
    padding: 0px 0px 20px 0px;
    border-radius: 6px;
    background: white;
    color:black;
}

.collection-trangle{
    border-style: solid;
    position: absolute;
    left: -20px;
    top: 12px;
    width: 0px;
    height: 0px;
    border-color: transparent #1f9e9b #1f9e9b transparent;
    border-width: 20px 20px 20px 20px;
    transform: rotate(135deg);
}

.collection-form_header{
    background: #1f9e9b;
    font-weight: bold;
    border-bottom: 1px solid #d6d6d6;
    height: 29px;
    line-height: 29px;
    border-radius: 6px 6px 0px 0px;
    color: white;
}

.collection-form_body{
    padding: 0px 8px;
}

.collection-form_row{
    text-align: left;
    height: 45px;
    line-height: 45px;
}

.collection-form_row label{
    display: inline-block;
    width: 30%;
    margin-right: 5%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.collection-form_row input{
    display: inline-block;
    border: 1px solid #e0e6e6 !important;
    width: 60%;
    border-radius: 4px !important;
}

.collection-form_row input:focus{
    border-color: rgb(228, 96, 50);
}

.collection-form_footer{
    padding: 0px 8px;
}

.collection-btn{
    display: inline-block;
    height: 25px;
    width: 60px;
    border-radius: 4px;
    line-height: 25px;
    cursor: pointer;
    float: right;
    font-size: 13px;
    font-weight: bold;
}
.collection-comfirm_btn{
    background: #1f9e9b;
    color: white;
    margin-right: 20px;
}
.collection-cancel_btn{
    background: rgb(108, 115, 120);
    color: white;
    margin-right: 20px;
}

.collection-comfirm_btn:hover{
    background: #1e7c79;
}

.collection-cancel_btn:hover{
    background: rgb(84, 91, 96);
}

.collections-body {
    width: 100%;
    height: 500px;
    background: rgba(3, 29, 35, 0.86);
    overflow-y: auto;
    color: white;
}

.collections-body-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
}

/*滚动条样式*/
.cle-body::-webkit-scrollbar {/*滚动条整体样式*/
    width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 6px;
}
.cle-body::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(228, 96, 50, 0.65);
    background: rgba(228, 96, 50, 0.65);
}
.cle-body::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(228, 96, 50, 0.65);
    border-radius: 0;
    background: rgba(228, 96, 50, 0.1);
}
</style>